<template>
    <div class="box4" ref="map">

    </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
// 引入echarts
import * as echarts from 'echarts'
// 引入中国地图的json数据
import chinaJSON from './china.json'
// 获取组件实例
let map = ref()
// 注册中国地图
echarts.registerMap('china', chinaJSON as any)
// 挂载时注册图表实例
onMounted(() => {
    let mychart = echarts.init(map.value);
    // 设置配置项
    mychart.setOption({
        // 地图组件
        geo: {
            map: 'china',//中国地图
            roam: true,//鼠标缩放
            // 地图的位置
            left: 100,
            top: 120,
            right: 50,
            bottom: 50,
            // 设置文字
            label: {
                show: true,//显示文字
                color: 'white',
                fontSize: 16
            },
            // 每一个多边形的样式
            itemStyle: {
                color: 'rgb(53,111,227)',
                opacity: .8
            }
        },
        // 布局位置
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
        series: [
            {
                type: 'lines',//航线系列
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989],//起点
                            [119.306239, 26.075302]//终点
                        ],
                        // 线条样式
                        lineStyle: {
                            color: 'white',
                            width: 6
                        },
                    },
                    {
                        coords: [
                            [116.405285, 39.904989],//起点
                            [104.065735, 30.659462]//终点
                        ],
                        // 线条样式
                        lineStyle: {
                            color: 'white',
                            width: 6
                        },
                    }
                ],// 线条特效
                effect: {
                    show: true,
                    symbol: 'arrow',
                    color: 'black',
                    symbolSize: 10,
                }
            }
        ]
    })
})
</script>
<style lang='scss' scoped></style>